<template>
	<div class="sidebar" :class="{'sidebarSmall': isCollapse}">
        <el-scrollbar style="height:100%">
            <el-menu class="eq-menu" :collapse="isCollapse" :default-active="activeIndex">
    			<SubMenu :menuList="menuList"/>
    		</el-menu>
        </el-scrollbar>
	</div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter, useRoute } from 'vue-router';
import { useGlobalStore } from '@/store/modules/global';
import { useTabsStore } from '@/store/modules/tabs';
import SubMenu from './c/SubMenu.vue';

const globalStore = useGlobalStore();
const tabsStore = useTabsStore();

const { isCollapse } = storeToRefs(globalStore);

const router = useRouter();
const route = useRoute();

const menuList = ref([]);
const activeIndex = ref('/');

onMounted(() => {
    getMenuList();
});

watch(() => route.path, (val) => {
    activeIndex.value = val;
});

// 获取菜单列表数据
const getMenuList = () => {
	const routes = router.options.routes;
	const menuDatas = [];
	const activePath = route.path;
	let defaultTabData = {};

	const recusive = (datas, menuList) => {
		datas.forEach(item => {
			const { children = [], path, meta, name } = item;
			if (!meta?.hidden) {
				if (children.length > 0) {
					const menuItem = {
						path, 
						name,
						title: meta.title || '', 
						icon: meta.icon || '', 
						children: []
					};
					
					if(meta.title === '首页'){
					    recusive(item.children, menuList);
					}else{
					    menuList.push(menuItem);
					    recusive(item.children, menuItem.children);
					}
				} else {
				    const data = {
						path, 
						name,
						title: meta.title || '', 
						icon: meta.icon || '', 
						children: []
					};
					menuList.push(data);
					
					// 初始导航栏内容获取
					if(path === activePath) {
                        defaultTabData = data;
                    }
				}
			}
		});
	};

	recusive(routes, menuDatas);
	menuList.value = menuDatas;
	activeIndex.value = activePath;
	getDefaultTabData(defaultTabData);
};

// 默认导航栏数据获取
const getDefaultTabData = (data) => {
    const { name } = data;
    tabsStore.setActiveTab(name);
    tabsStore.setTabMenus([data]);
};

</script>

<style lang="scss">
.el-menu {
	background-color: var(--eq-bg-color2);
	border: none;
}
.el-menu--collapse{
	width: 50px;
	.el-sub-menu__title {
	    @extend .center;
	    width: 50px;
	    padding: 0px;
	}
}

.eq-menu {
	background-color: var(--eq-bg-color2);
	.el-menu-item {
		color: #fff;
		height: 40px;
		font-size: 12px;
	}

	.el-menu-item:hover {
		background-color: #4d5c82;
	}
	.el-menu-item.is-active{
	    color: var(--eq-icon-font-hover-color);
	}
	.el-sub-menu {
	    margin-bottom: 10px;
		.el-sub-menu__title {
			color: #fff;
			height: 40px;
			.menuIcon{
			    margin-right: 12px;
			}
		}
		.el-menu-item{
            .menuIcon{
			    margin-right: 12px;
			}
		}
		.el-sub-menu__title:hover {
			background-color: #4d5c82;
		}
	}
}
</style>

<style lang="scss" scoped>
.sidebar {
	width: 210px;
	padding: 10px 0px;
	transition: width 0.66s;
	background-color: var(--eq-bg-color2);
	border-right: 1.5px solid var(--eq-border-color);
}
.sidebarSmall{
    width: 50px;
}
</style>